<!-- 报价单表格 -->
<template>
  <div class="tablebottom">
    <template>
      <div v-for="(table,index) in getTable" :key="index">
        <el-table
          :data="table.goods"
          border
          style="margin-top:20px"
          :span-method="objectSpanMethod"
        >
          <el-table-column prop="date" label="产品描述" width="350">
            <template slot-scope="scope">
              <div style="display:flex;flex-direction:row;align-items:center">
                <img
                  :src="scope.row.goods_logo "
                  alt="加载失败"
                  style="width:50px;height:50px ;margin-right:15px"
                />
                <p>
                  <span style="font-size:14px;">{{ scope.row.goods_title }}</span>
                  <br />
                  <span
                    style="font-size:12px; color:#999"
                  >商品型号:{{scope.row.id}}-{{scope.row.goods_id}}</span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="selling_price" label="单价"></el-table-column>
          <el-table-column prop="num" label="数量"></el-table-column>
          <el-table-column label="总计">
            <template slot-scope>
              <div style="color:#5f5f5f;font-size:12px;">
                <span style="color:#ff0000;font-weight:900">{{ table.total_price }}元</span>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="报价单状态">
            <template slot-scope>
              <div style="color:#5f5f5f;font-size:12px;">
                <p v-if="table.quote_status">已转订单</p>
                <p v-else>未转订单</p>
                <p>有效期：{{ table.validity_period }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope>
              <div style="display:flex;flex-direction: column;align-items: center">
                <a :href="table.exportUrl" target="_blank">
                  <el-button size="mini" type="warning" style="margin-bottom:5px;">导出报价单</el-button>
                </a>
                <el-button
                  size="mini"
                  type="warning"
                  plain
                  style="margin-bottom:5px;"
                  @click="jumpOrder(index)"
                >转订单</el-button>
                <a :href="table.previewUrl" target="_blank">
                  <p style="cursor: pointer;">报价单预览</p>
                </a>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <p
          style="text-align: right;font-size:12px; padding-right:20px;color:#ff9000; margin-bottom: 20px"
        >报价单号：{{table.quote_no}} 报价时间：{{table.create_at}}</p>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pages: null,
      getTable: []
    };
  },
  methods: {
    //合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
        if (rowIndex % 100 === 0) {
          return {
            rowspan: 100,
            colspan: 1
          };
        } else {
          return {
            rowspan: 100,
            colspan: 0
          };
        }
      }
    },
    //获取报价单数据
    async getQutation() {
      let user_id = this.$store.state.user_id;
      let page = this.page;
      const res = await this.$http({
        method: "post",
        url: "index/api/myQuote",
        data: {
          user_id,
          page
        }
      });
      if (res.data.State.Code == 200) {
        console.log(res);
        this.pages = res.data.pages;
        this.getTable = res.data.data;
        this.getTable.forEach(element => {
          let param = "";
          let nums = "";
          for (const key in element.goods) {
            if (element.goods.hasOwnProperty(key)) {
              const ele = element.goods[key];
              param += `${ele.request_id},`;
              nums += `${ele.num},`;
            }
          }
          console.log(param);
          param = param.substr(0, param.length - 1);
          nums = nums.substr(0, nums.length - 1);

          this.$set(
            element,
            "exportUrl",
            `https://www.fdimall.com/index/downloadPdf?user_id=${user_id}&invoice_type=${element.invoice_type}&quote_no=${element.quote_no}&goods_id=${param}&num=${nums} `
          );

          this.$set(
            element,
            "previewUrl",
            `https://www.fdimall.com/index/previewPdf?user_id=${user_id}&invoice_type=${element.invoice_type}&quote_no=${element.quote_no}&goods_id=${param}&num=${nums} `
          );
        });
      }
    },
    //转订单
    jumpOrder(index) {
      // console.log(index);
      let CartArray = [];
      this.getTable[index].goods.forEach(res => {
        console.log(res);
        let good = {};
        good.id = res.request_id;
        good.pid = res.goods_id;
        good.image = res.goods_logo;
        good.name = res.goods_title;
        good.price = res.selling_price;
        good.num = res.num;
        CartArray.push(good);
      });
      console.log(CartArray);
      this.$router.push("/OrderForm"); //跳转确认订单页面
    }
  },
  mounted() {
    this.getQutation();
  }
};
</script>
<style lang='scss' scoped>
.tablebottom {
  margin-bottom: 66px;
}
</style>